/**
* @Author: 李晨光
* @Date: 2019/12/16
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/16
**/
<comment>
  # 我提交的
</comment>
<template>
  <div id="Submitted" class="p-box">
    <div class="p-return">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        {{type == 'submitted' ? '我提交的' : '审批工作'}}
        <mu-button icon slot="right" @click="filterOpen">
          <!-- <mu-icon value="more"></mu-icon> -->
          <i class="iconfont iconshaixuan3"></i>
        </mu-button>
      </mu-appbar>
      <mTabs v-model="active" :tabList="type == 'submitted' ? tabList1 : tabList" @change="tabStatus" style="z-index: unset" />
    </div>

    <mu-container
      class="lan-loadmore-content"
      style="height:calc(100vh - (.45rem + .52rem));position: relative;background:#fff;overflow: scroll;padding: 10px 14px;"
      ref="container"
    >
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loading="loading"
        @load="load"
        :loaded-all="loadAll"
      >
        <!-- 这里是业务结构 -->
        <mu-paper
          class="lan-card"
          :z-depth="1"
          v-for="(item,index) in listData"
          :key="index"
          @click="gotoDetail(item)"
        >
          <div class="lan-detail">
            <mu-badge class="tag" :content="item.applyType == '2' ? '行为观察' : '问题上报'"></mu-badge>
            <mu-badge
              class="tag"
              :content="item.status == 2 ? '通过' : item.status == 1 ? '不通过' : '待审批'"
              :color="item.status == 2 ? 'success' : item.status == 1 ? 'secondary' : ''"
            ></mu-badge>
          </div>
          <template v-if="item.applyType == '2'">
            <div class="lan-detail">
              <span class="lan-detail-h">观察时间：</span>
              <span class="lan-detail-r">{{item.observeTime}}</span>
            </div>
            <div class="lan-detail">
              <span class="lan-detail-h">被观察人：</span>
              <span class="lan-detail-r">{{item.beObservedUserName}}</span>
            </div>
            <div class="lan-detail">
              <span class="lan-detail-h">观察人：</span>
              <span class="lan-detail-r">{{item.observeUserName}}</span>
            </div>
            <div class="lan-detail">
              <span class="lan-detail-h">审核人：</span>
              <span class="lan-detail-r">{{item.approvalUserName}}</span>
            </div>
            <div class="lan-detail">
              <span class="lan-detail-h">工匠行为：</span>
              <span class="lan-detail-r">{{item.behaviorName}}</span>
            </div>
            <div class="lan-detail">
              <span class="lan-detail-h">奖励积分：</span>
              <span class="lan-detail-r">{{item.score}}</span>
            </div>
          </template>

          <template v-else>
            <div class="lan-detail">
              <span class="lan-detail-h">上报时间：</span>
              <span class="lan-detail-r">{{item.reportTime}}</span>
            </div>
            <div class="lan-detail">
              <span class="lan-detail-h">上报人：</span>
              <span class="lan-detail-r">{{item.reportUserName}}</span>
            </div>
            <div class="lan-detail">
              <span class="lan-detail-h">项目名称：</span>
              <span class="lan-detail-r">{{item.orgName}}</span>
            </div>
            <div class="lan-detail">
              <span class="lan-detail-h">所属区域：</span>
              <span class="lan-detail-r">{{item.areaName}}</span>
            </div>
            <div class="lan-detail">
              <span class="lan-detail-h">审核人：</span>
              <span class="lan-detail-r">{{item.approvalUserName}}</span>
            </div>
          </template>
        </mu-paper>
        <p v-if="loadAll && listData.length > 5" class="nodataTips">无更多数据了</p>
      </mu-load-more>
      <NoData v-if="listData.length <= 0 && loaded" />
    </mu-container>
    <SearchFilter
      v-if="filter.open"
      v-model="filter.res"
      :open="filter.open"
      @confirm="filterConfirm"
      @close="filterClose"
    ></SearchFilter>
  </div>
</template>

<script>
import mTabs from "@/tabs/mTabs";
import SearchFilter from "@/search/Filter";

export default {
  name: "Submitted",
  components: {
    mTabs,
    SearchFilter
  },
  props: {},
  data() {
    return {
      api: {
        getSubmittedListApi: "/safety/star/approval/pageList",
        approveAPi: "/safety/star/approval/submit"
      },
      type: "",
      tabList: [{ id: "1", name: "待我审批" }, { id: "2", name: "我已审批" }],
      tabList1: [{ id: "1", name: "待审批" }, { id: "2", name: "已审批" }],
      active: "1",
      refreshing: false,
      loading: false,
      loaded: false,
      loadAll: false,
      pageSize: 10,
      pageNo: 0,
      totalPage: 1,
      listData: [],
      filter: {
        // 筛选参数
        open: false,
        res: {
          startTime: "",
          endTime: ""
        }
      },
      params: {
        orgId: "",
        type: "",
        approvalUserId: "",
        status: "",
        approvalType: "",
        applyUserId: ""
      }
    };
  },
  computed: {},
  // beforeRouteEnter(to, from, next) {
  //   next(vm => {
  //     if (from.name == "Navs") {
  //       Object.assign(vm.$data, vm.$options.data());
  //       vm.initPage();
  //     }
  //   });
  // },
  async created() {
    this.initPage();
  },
  mounted() {},
  watch: {},
  methods: {
    initPage() {
      let index = sessionStorage.getItem('tabActive')
      if(index){
        this.active = index
      }
      this.type = this.$route.query.type;
      let orgInfo = this.$A.GS("orgInfo");
      let userInfo = this.$A.GS("userInfo");
      // this.params.type = orgInfo.type
      // this.params.orgId = orgInfo.orgId
      if (this.type == "submitted") {
        this.params.applyUserId = userInfo.userId;
      } else {
        this.params.approvalUserId = userInfo.userId;
      }
      this.params.status = this.active == "1" ? "0" : "12";

      this.getData(this.params);
    },
    tabStatus() {
      this.params.status = this.active == "1" ? "0" : "12";
      this.pageNo = 0;
      this.totalPage = 1;
      this.loadAll = false;
      this.getData(this.params);
    },
    async getData(params) {
      this.params.startTime = this.filter.res.startTime;
      this.params.endTime = this.filter.res.endTime;
      if (this.pageNo >= this.totalPage) {
        this.loadAll = true;
        return;
      }
      if (!this.loadAll) {
        this.pageNo += 1;
      } else {
        return;
      }
      let obj = {
        ...params,
        current: this.pageNo,
        size: this.pageSize
      };
      this.$openLoading();
      this.$A
        .Go("get", this.api.getSubmittedListApi, obj)
        .then(success => {
          this.$closeLoading();
          if (success.code == 200) {
            let data = success.body.rows;
            let total = success.body.page.rows || "0";
            this.totalPage = Math.ceil(total / this.pageSize);
            if (this.pageNo == 1) {
              this.listData = data;
            } else {
              this.listData.push(...data);
            }
            if (
              total == 0 ||
              Math.ceil(total / this.pageSize) <= this.pageNo ||
              data.length <= 0
            ) {
              this.loadAll = true;
            }
          } else {
            this.listData = [];
          }
          this.loaded = true;
        })
        .catch(err => {
          this.$closeLoading();
          console.warn(err);
        });
    },
    async load() {
      this.loading = true;
      await this.getData(this.params);
      this.loading = false;
    },
    async refresh() {
      this.refreshing = true;
      this.pageNo = 0;
      this.totalPage = 1;
      this.loaded = false;
      this.loadAll = false;
      this.listData = [];
      this.$refs.container.scrollTop = 0;
      await this.getData(this.params);
      this.refreshing = false;
    },
    gotoDetail(detail) {
      sessionStorage.setItem('tabActive',this.active)
      if (this.type == "submitted") {
        this.$router.push({
          name: "SubmittedDetail",
          query: {
            id: detail.applyType == "2" ? detail.observeId : detail.reportId,
            applyType: detail.applyType,
            type: this.type
          }
        });
      } else {
        this.$router.push({
          name: "ApproveDetail",
          query: {
            id: detail.applyType == "2" ? detail.observeId : detail.reportId,
            applyType: detail.applyType,
            type: this.type
          }
        });
      }
    },
    filterOpen() {
      this.filter.open = true;
    },
    filterClose() {
      this.filter.open = false;
    },
    filterConfirm() {
      this.pageNo = 0;
      this.totalPage = 1;
      this.loadAll = false;
      this.filterClose();
      this.getData(this.params);
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
</style>
